<template>
  <div>
    <div class="item-block" v-if="detailAll.pack_info">
      <ul class="tabs" v-if="detailAll.pack_info">
        <li v-for="(item,index) in detailAll.pack_info" :key="index" :class="expressNoAct == item.express_no ?'active':''" @click="clickTab(detailAll.point_exchange_order_id,item.express_no)">{{item.name}}</li>
      </ul>
    </div>
    <div class="item-block goods-container">
      <ul class="order-goods">
        <li v-for="(goods,index) in detailAll.goods" :key="index" class="goods-li">
          <section class="order-goods-img">
            <a href="javascript:;" @click="JumpName('exchangeDetail',{id:goods.point_exchange_id})">
              <img :src="goods.pic_url+'80x80'" width="80" height="80" v-if="goods.is_compress"/>
              <img :src="goods.pic_url" width="80" height="80" v-else/>
            </a>
          </section>
          <section class="order-goods-infor">
            <div class="left">
              <a class="goods-title" @click="JumpName('exchangeDetail',{id:goods.point_exchange_id})">{{goods.title}}</a>
              <p class="goods-props" v-if="goods.props">{{goods.props}}</p>
              <p class="price goods-point">兑换{{detailAll.point_name}}：{{goods.point}}</p>
            </div>
            <div class="right">
              <span class="num fr"><i>x</i>{{goods.num}}</span>
            </div>
          </section>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { scaleGoodsPrice } from '@/utils/index.js'
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
export default Vue.extend({
  props: {
    /* otherData: {
      type: Object,
      default: () => {
        return {}
      }
    }, */
    detailAll: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    expressNoAct() {
      if (this.$route.query.express_no) {
        return this.$route.query.express_no
      } else {
        const packInfo = this.detailAll.pack_info
        const expressNo = this.detailAll.express_no ? this.detailAll.express_no : 0
        let selExpressNo = ''
        packInfo.forEach(item => {
          if (item.express_no == expressNo) {
            // console.log(item.express_no)
            selExpressNo = item.express_no
          }
        })
        return selExpressNo
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // scaleGoodsPriceFn(price) {
    //   return scaleGoodsPrice(price)
    // },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    clickTab(id, expressNo) {
      this.$JumpHref(this, 'pointOrderDetail', { id: id, express_no: expressNo })
    }
  }
})
</script>

<style lang="scss">
// @import "src/styles/mixin";
@import "src/styles/variables";
@import "src/styles/order/detail";
.tabs{
  display:flex;
  justify-content: space-around;
  li{
    position:relative;
    font-size:26px;
    color:#666;
    &.active{
      font-size:28px;
      color:#333;
      &::after{
        content:"";
        width:54px;
        height:4px;
        background:linear-gradient(90deg,rgba(242,11,34,1),rgba(242,11,34,0.2));
        position:absolute;
        left:50%;
        bottom:-12px;
        margin-left:-27px;
      }
    }
  }
}
.goods-container{
  .title{
    margin-bottom:30px;
  }
}
.order-goods{
  .order-goods-infor{
    .goods-point{
      font-size:28px;
      color: #F42B2B;
    }
  }
}
</style>